/**
 * 该 app 仓库，采用 选项式定义
 *
 *    相比较 Vuex , 没有 mutations modules namespaced
 */

import { defineStore } from 'pinia'

export const useAppStore = defineStore('app', {
  /**
   * 定义该仓库的状态数据的位置
   */
  state() {
    return {
      theme: 'light', // 系统主题
      locale: 'zh-cn' // 系统语言
    }
  },

  /**
   * 定义基于现有 state 数据或其他 getter 数据做二次计算得到一份新数据。类似组件中的计算属性
   */
  getters: {
    isDark(state) {
      return state.theme === 'dark'
    }
  },

  /**
   * 定义动作
   *    与 Vuex 不同
   *      1. 可以直接修改 state 数据了
   *      2. 参数不同, 参数是由组件调用时传递的
   *      3. 通过 this 直接获取当前仓库实例，然后修改即可
   */
  actions: {
    toggleTheme(payload) {
      console.log('toggleTheme payload', payload)

      this.theme = this.theme === 'light' ? 'dark' : 'light'
    }
  }
})
